Introduction to high-fidelity prototypes 高保真原型介紹
原型是產品的初期模型，用來展示功能性。其中：
- 低保真原型（Low-Fidelity Prototype）：主要用佔位符表示內容，強調結構和流程。
- 高保真原型（High-Fidelity Prototype）：細緻且可互動的設計，外觀與最終產品高度相似，用於呈現真實的使用者體驗。
低保真原型（Low-Fidelity Prototype）
- 是粗略的互動模型
- 通常用線框（Wireframe）、佔位符、灰階圖塊表達介面結構
- 核心是驗證資訊架構與使用者流程，不關注視覺細節
- 可以是靜態圖，也可以透過簡單點選實現頁面跳轉
Mockup（靜態高保真視覺稿）
- 是靜態的視覺設計成果
- 包含具體顏色、圖片、圖示、字型排版等
- 不可互動，僅展示“長什麼樣”
- 不等於原型，但通常是製作高保真原型的基礎素材
高保真原型（High-Fidelity Prototype）
- Mockup + 互動 ➜ 高保真原型
- 視覺細節+使用者互動+頁面跳轉＝完整體驗
- 用於可用性測試、彙報或開發參考
Mockup 與原型的區別（Mockup vs. Prototype）
- Mockup 專注視覺設計（顏色、圖示、佈局）
- 原型則專注功能實現（頁面跳轉、手勢互動等）
1. Hotspot（互動熱點）
使用者觸發互動的位置。也就是使用者點選/觸控/操作的區域。在原型中，這通常是一個按鈕、圖示或觸控區域。通俗理解：“使用者點這裡 → 執行操作”
2. Connection（連線線 / 動線）
連線。熱點與目標介面的“箭頭/連線”又叫 noodle（原型線），表示從當前介面跳到下一個介面的邏輯關係。通俗理解：“從 A 按鈕 → 跳到 B 頁面 的路徑”
3. Destination（目標介面）
互動結束並跳轉到的介面。也就是使用者點完後看到的新頁面，比如：從首頁 → 詳情頁，從登入頁 → 主頁面通俗理解：“操作完成後去哪裡”
高保真原型的三大要素（Three Core Elements）
視覺元素（Visual Elements）
包含色彩、影象、圖示、字型等內容
應使用真實內容代替佔位符（例如將“Dog Walker A”換成具體姓名和照片）
需確認所有文字、插圖、外部連結已準備好。若內容未完成，可暫用佔位版本
導航設計（Navigation Design）
引導使用者完成主要任務流程（User Flow）
檢查每個頁面是否具備以下功能圖示：
- 返回箭頭（Back Arrow）
- 關閉按鈕（X）
自查問題包括：
- 使用者如何從一個頁面跳轉到另一個頁面？
- 是否容易找到導航入口？
- 使用者流程何時終止？
互動與動畫（Interaction & Animation）
為原型新增互動性，讓設計“動起來”
在 Figma 中新增連線的步驟：
- 選擇熱點區域（如按鈕、圖示、標題）
- 點選藍色「+」號新增連線箭頭（Noodle）
- 指定目標頁面（目標必須是 Frame 或畫面）
新增互動動作和過渡動畫（如點選反饋、滑動轉場等）
Figma 中建立高保真原型的步驟（Step-by-Step in Figma）
準備好 Mockup 設計稿：確認視覺設計全部完成
替換佔位符：使用真實文字與圖片替代佔位內容
設定頁面導航：確保每一頁都可以透過互動方式訪問或返回
建立連線（Interaction Links）：用 Figma 的 Prototype 模式建立頁面跳轉
新增動畫效果：可選擇「滑動進入」「淡入淡出」等動效提升真實感
實踐建議（Pro Tips）
團隊協作：理想情況是與內容團隊協同完成文字、影象等素材，但現實中也可暫用佔位資料
模擬真實體驗：比如在遛狗應用中，展示真實使用者名稱、頭像和服務資訊，增強測試效果
測試流程完整性：確保每一步操作都可預期地返回或繼續，避免“死衚衕”頁面